

/* 一个很丑的翻页 */
.product{
	background:url('/skin/images/case_bg.png')no-repeat center center;
	background-size:cover;
}
.product .container-fluid{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}


.product  .t-wrap{border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius:50%; -o-border-radius:50%;  behavior: url(pie.htc);}
.product  .por_bg1{width: 50%;height: 100%;position: absolute;top: 0;right: 0;transform: rotateY(0deg);transform-style: preserve-3d;transistion: 1s all ease;z-index: 2;transform-origin: left center;transition: all 2.5s;-webkit-transition: all 2.3s;}
.product  .por_bg1 span{width: 100%;height: 100%;position: absolute;top: 0;left: 0;transition: all .5s;-webkit-transition: all .3s;}
.product  .por_bg2{width: 50%;position: absolute;right: 0;top: 0;height: 100%;z-index: 1;}
.product  .t-wrap:hover .por_bg1{transition: none;transform: rotateY(-180deg);transition: all 2.5s;-webkit-transition: all 2.3s;behavior: url(pie.htc)}
.product  .por_bg1 .por_span1{transform: translateZ(1.1px);border-radius: 0 260px 260px 0;-moz-border-radius:: 0 260px 260px 0;-ms-border-radius:: 0 260px 260px 0;-o-border-radius:: 0 260px 260px 0; behavior: url(pie.htc);}
.product  .por_bg1 .por_span2{transform: translateZ(-1.1px) scale(-1,1);border-radius: 260px 0 0 260px;-moz-border-radius: 260px 0 0 260px;-ms-border-radius: 260px 0 0 260px;-o-border-radius: 260px 0 0 260px; text-align: right;behavior: url(pie.htc);}


#turn{overflow: hidden; padding:50px 0;}
#turn .t-wrap{position:relative;width:17%;height:17%;background:#fff;overflow: hidden; margin:1.5%;}

#turn .t-wrap .cp_bg{position:absolute;top:0;left:0;width:100%;height:100%;background: url(../images/cp_bg.png) no-repeat;background-size: 100% auto;}
#turn .t-wrap .t-w-head{height:100%;}
#turn .t-wrap .t-w-head img{width:100%;height:100%;transform:rotate(-720deg);}
#turn .t-wrap .t-w-head.hover .t-h-box img{transform:scale(.5,.5);transform:rotate(0);transition:.5s .1s;opacity:0;}
#turn .t-wrap .t-w-head.hover .t-h-box .fade{transform:scale(1,1);transform:rotate(0);transition:all .5s .2s;opacity:1;}
#turn .t-wrap .t-w-head.hover .t-h-box .fade p{opacity:1;}
#turn .t-wrap .t-w-head.hover .t-h-box .fade a{opacity:1;}
#turn .t-wrap .t-w-head .t-h-box{position:relative;overflow: hidden;height:100%;background:url("../images/bgimg.jpg") center center/cover;}
#turn .t-wrap .t-w-head img{display:block;height:100%;opacity:1;transition:.5s 0s;}
#turn .t-wrap .t-w-head .t-h-box .fade{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8); transform:rotate(-180deg) scale(.3,.3); transition:all .5s; opacity:0; }
#turn .t-wrap .t-w-head .t-h-box .fade p{opacity:0; transition:1s ease-in-out;}
#turn .t-wrap .t-w-head .t-h-box .fade a{opacity:0;transition:1s ease-in-out;}
#turn .t-wrap .t-w-head .t-h-box .fade .p1{position:absolute;top: 60%;width:calc(100% - 40px);transform:translate(0,-80%);overflow: hidden;padding:0 20px;height: auto;height: 100px;/* line-height: 120px; */font-size: 15px;color:#fff;text-align:center;margin:0 auto;/* text-overflow: ellipsis; *//* white-space: nowrap; */}
#turn .t-wrap .t-w-head .t-h-box .fade .p2{padding:0 5px;margin:15px auto;text-align:center;color:#fff;font-size:12px;line-height:20px;overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
#turn .t-wrap .t-w-head .t-h-box .fade a{display:block;width:120px;height:35px;background:#fed136;color:#fff;font-size:14px;font-weight:bold;text-align:center;line-height: 35px;text-decoration: none;margin:0 auto;transition:.7s;}
#turn .t-wrap .t-w-head .t-h-box .fade a:hover{background:#000;}
#turn .t-wrap .t-w-cont{width:100%;height:80px;margin-top:15px;}
#turn .t-wrap .t-w-cont a{display:block;text-align:center;font-size:18px;color:#000;text-decoration:none;transition:.6s;}
#turn .t-wrap .t-w-cont a:hover{color:#fed136;}
#turn .t-wrap .t-w-cont p{color:#666;font-size:16px;text-align:center;padding-top:10px;margin:0;}
#turn .t-wrap a.hover_click{position:absolute;display:block;width:100%;height:100%;top:0;left:0;}





/* 产品推荐 */
#rec{
	padding:60px 0;
	background:#fafafa;
}
#rec .topTitle{
	text-align:center;
	padding-bottom:35px;
}
#rec .topTitle span{
	font-size:24px;
	display:inline-block;
	border-bottom:2px solid #067cc0;
	padding-bottom:10px;
}
.picMarquee-left .bd{ padding:10px;  overflow:hidden; }
.picMarquee-left .bd ul{ overflow:hidden; zoom:1; }
.picMarquee-left .bd ul li{ margin:0 15px; float:left; _display:inline; overflow:hidden; text-align:center;  }
.picMarquee-left .bd ul li .pic{ text-align:center; }
.picMarquee-left .bd ul li .pic img{ width:220px; height:220px; display:block; margin:0 auto;}
.picMarquee-left .bd ul li .title{ line-height:24px;  text-align:center; font-size:16px; margin-top:10px;}

@media screen and (max-width:768px){
	#rec{
		padding:40px 0;
	}
	.picMarquee-left .bd{ padding:5px; }
	.picMarquee-left .bd ul li{ margin:0 5px; }

	.picMarquee-left .bd ul li .pic img{ width:160px; height:160px; display:block;}
	
}

/* 公司简介 */
#about{
	padding:60px 0;
}
#about .topTitle{
	text-align:center;
	padding-bottom:35px;
}
#about .topTitle span{
	font-size:24px;
	display:inline-block;
	border-bottom:2px solid #067cc0;
	padding-bottom:10px;
}
#about h3{
	margin-top:0px;
	margin-bottom:20px;
	font-weight:700;
}
#about .desc{
	font-size:15px;
	line-height:26px;
	word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:8;
    -webkit-box-orient:vertical;
    overflow:hidden;
	margin-bottom:15px;
	text-indent:30px;
	color:#666;
	text-align: justify;
	
}
#about .more{
	display:inline-block;
	border:1px solid #ddd;
	height:36px;
	line-height:36px;
	padding:0 15px;
	background:#fafafa;
	margin-bottom:20px;
}
#about .more:hover{
	background:#067cc0;
	color:#fff;
	border:1px solid #067cc0;
}

#about .imgbox img{
	width:100%;
}

@media screen and (max-width:768px){
	#about{
		padding:40px 0;
	}
	#about h3{
		margin-top:0px;
		margin-bottom:10px;
		font-weight:700;
		font-size:22px;
	}
	#turn .t-wrap{
	    width:100px !important;
	    height: 100px !important;
	}
	.picList .li{
	    max-width: 200px !important;
	}
	
	
}


